<template>
    <div class="editor_content">
        <div
        ref="editor"
        >
        </div>
    </div>
</template>
<script>
import E from 'wangeditor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Vue from 'vue';
import {mapState} from 'vuex'
export default {
    props:['initial'],
    data(){
        return{
            test:'',
            editor:null
        }
    },
    watch: {
        initial (newValue,oldValue) {
            console.log(newValue,oldValue)
            this.editor.txt.html(newValue)
        }
    },
    mounted(){
        // console.log(this.initial)
        this.$nextTick(()=>{
            this.editor = new E(this.$refs.editor)
            this.editor.customConfig.onchange = (html) => {
              this.editorContent = html
              this.$emit('catchData',html)  //把这个html通过catchData的方法传入父组件
            }
            this.editor.customConfig.menus = [          //菜单配置
              'head',
              'list',  // 列表
              'justify',  // 对齐方式
              'bold',
              'fontSize',  // 字号
              'italic',
              'underline',
              'image',  // 插入图片
              'foreColor',  // 文字颜色
              'undo',  // 撤销
              'redo',  // 重复
            ]
            this.editor.customConfig.uploadImgServer = this.apiObj.upload
            this.editor.customConfig.uploadFileName = 'image'
            this.editor.customConfig.uploadImgMaxSize = 50 * 1024 * 1024;
            this.editor.customConfig.showLinkImg = false
            this.editor.customConfig.uploadImgTimeout = 50000
            this.editor.customConfig.uploadImgHooks = {
              before: function (xhr, editor, files) {
                  // 图片上传之前触发
                  // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                  
                  // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                  // return {
                  //     prevent: true,
                  //     msg: '放弃上传'
                  // }
              },
              success: function (xhr, editor, result) {
                  // 图片上传并返回结果，图片插入成功之后触发
                  // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                this.imgUrl=Object.values(result.data).toString()
              },
              fail: function (xhr, editor, result) {
                  // 图片上传并返回结果，但图片插入错误时触发
                  // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
              },
              error: function (xhr, editor) {
                  // 图片上传出错时触发
                  // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
              },
              timeout: function (xhr, editor) {
                  // 图片上传超时时触发
                  // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
              },

              // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
              // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
              customInsert: function (insertImg, result, editor) {
                  // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                  // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                  // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                //   console.log(result)
                  insertImg(result.content.image_list)
                  // result 必须是一个 JSON 格式字符串！！！否则报错
              }
          }
            this.editor.create()
           this.editor.txt.html(this.initial)
        })
    }
}
</script>

